<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .is-border {
        border: 1px solid #fa0;
    }

    .el-alert--warning.is-light {
        color: #333;
    }

    .el-alert__title {
        font-size: 14px;
    }

    .p24 {
        padding: 24px;
    }

    .strat-center {
        width: 168px;
        height: 52px;
        border: 1px solid #e0e0e0;
        background: #fff;
        border-radius: 2px;
        padding-right: 8px;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>

<body>
    <div id="app" class="bgc-f2 pl-16 pr-16 pt-16" v-cloak>
        <el-alert title="收款方式均可拖动排序。" type="warning" class="is-border">
        </el-alert>
        <div class="ub ub-pe p24 ovh">
            <el-button type="primary" size="small" class="tx-14">新增收款方式</el-button>
        </div>

        <div class="">
            <draggable v-model="tableData" chosen-class="chosen" :scroll="true" force-fallback="true" animation="150"
                @start="onStart" @end="onEnd">
                <div class=" ub ub-wrap">
                    <div class="strat-center ub ub-ac mr-16 mb-16" v-for="(item, index) in tableData" :key="item.id">
                        <div><span class="iconfont icon-tuozhuai tx-w tx-20 ml-5"></span></div>
                        <div class="ml-3 ub-f1">{{item.name}}</div>
                        <div class="tx-18 tx-99 ">
                            <i class="el-icon-edit"></i>
                        </div>
                        <div class="tx-18 tx-99 ml-8 mr-2 ">
                            <i class="el-icon-delete"></i>
                        </div>
                    </div>
                </div>
            </draggable>
        </div>
    </div>
    <script type="text/babel">
        Vue.component('vuedraggable', window.vuedraggable)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable: window.vuedraggable, //当前页面注册组件
            },
            data() {
                return {
                    tableData: [],
                };
            },
            created() {
                this.init();
            },
            mounted() {
            },
            methods: {
                init() {
                    this.startLoading();
                    this.GET({ url: top.Config.curUrl + "/fae/faeConsumptionType/list", map: this.params }).then((res) => {
                        if (res.retcode == 200) { //如果返回码不是200则提示错误登录信息
                            this.tableData = res.result.faeConsumptionTypeList;
                        } else { //如果返回码是200则登录成功
                            this.msgError(res.retmsg)
                        }
                        this.closeLoading();
                    })
                },
                onStart() {
                },
                onEnd() {

                },
            }

        });
    </script>

</body>

</html>